<script setup lang="ts">
import { useChats } from "@/views/domain/knowledge/store/chat";
import { useAI } from "@/views/domain/knowledge/store/useAI";
import { ref } from "vue";
import { currentModel } from "@/views/domain/knowledge/config/ollama";

const { activeChat, switchModel, hasMessages } = useChats();
const { refreshModels, availableModels } = useAI();

const refreshingModel = ref(false);
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

const performRefreshModel = async () => {
  refreshingModel.value = true;
  await Promise.all([refreshModels(), sleep(1000)]);

  refreshModels().then(() => {
    refreshingModel.value = false;
  });
};

const handleModelChange = (event: Event) => {
  const wip = event.target as HTMLSelectElement;
  console.log("switch", wip.value);
  switchModel(wip.value);
};

type Props = {
  disabled: boolean;
};
const { disabled } = defineProps<Props>();
</script>

<template>
  <div class="flex flex-row text-gray-900 dark:text-gray-100">
    <div class="inline-flex items-center gap-2">
      <select
        :disabled="disabled"
        :value="activeChat?.model ?? currentModel"
        class="w-full cursor-pointer rounded-lg bg-white py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-600 disabled:opacity-50 dark:bg-gray-700 dark:text-gray-100"
        @change="handleModelChange"
      >
        <option :value="undefined" disabled selected>Select a model</option>
        <option
          v-for="model in availableModels"
          :key="model.name"
          :value="model.name"
        >
          {{ model.name }}
        </option>
      </select>

      <button
        :disabled="disabled"
        title="Refresh available models"
        class="inline-flex items-center justify-center rounded-lg border-none bg-gray-100 p-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-600 disabled:opacity-50 dark:bg-gray-700 dark:text-gray-100"
        @click="performRefreshModel"
      >
        <el-icon>
          <Refresh
            class="h-4 w-4 -scale-100 text-white"
            :class="{ 'animate-spin': refreshingModel }"
          />
        </el-icon>
      </button>
    </div>
  </div>
</template>
